<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Sistema de Prácticas Profesionales</title>
    </h:head>
    <h:body>
        <h:form id="form">
            <DIV ALIGN="center" >
                <p:panel header="FUNDACIÓN UNIVERSITARIA KONRAD LORENZ" style="background-color: lightgray" >  
                    <p:panel header="MODELO SUGERIDO CRONOGRAMA SEMESTRAL DE ACTIVIDADES" >
                        <h:panelGrid columns="6" border="5" bgcolor="" dir="CENTER" >
                            <h:outputText value="Practicante " />
                                <p:selectOneMenu value="#{buttonBean.number}">  
                                    <f:selectItem itemLabel="Select One" itemValue="" />  
                                    <f:selectItem itemLabel="Option 1" itemValue="1" />  
                                    <f:selectItem itemLabel="Option 2" itemValue="2" />  
                                    <f:selectItem itemLabel="Option 3" itemValue="3" />  
                                </p:selectOneMenu>
                            <h:outputText value="Supervisor Universitario " />
                            <p:inputText id="SupervisorEnt" maxlength="50" size="25"/>
                            <h:outputText value="Programa " />
                            <h:outputText value="Negocios o mercadeo... " />
                        </h:panelGrid>
                    </p:panel>
                    
                    <p:separator id="customSeparator" style="width:800px;height:20px" />
                    
                    <p:panel header="CRONOGRAMA SEMESTRAL DE ACTIVIDADES" >
                    
                    <h:panelGrid columns="4" border="5" bgcolor="" dir="CENTER" >
                            <h:outputText value="Proceso " />
                            <h:outputText value="Objetivos Institucionales " />
                            <h:outputText value="Objetivos Personales " />
                            <h:outputText value="Actividades " />
                            <p:inputText id="Proceso" maxlength="50" size="25"/>
                            <p:inputText id="ObjInst" maxlength="50" size="25"/>
                            <p:inputText id="ObjPers" maxlength="50" size="25"/>
                            <p:inputText id="Actividades" maxlength="50" size="25"/>
                            
                            <h:outputText value="Control " />
                            <h:outputText value="Programación " />       
                            <h:outputText value="Recursos " />
                            <h:outputText value="Observaciones " />
                            <h:panelGrid columns="1" border="" bgcolor="" dir="right" >
                                <p:separator id="customSeparator" style="width:240px;height:15px" />
                                <h:panelGrid columns="1" border="1" bgcolor="" dir="right" >
                                <h:outputText value="Programado "/>
                                <h:outputText value="Ejecutado " /> 
                                </h:panelGrid>
                            </h:panelGrid>
                            <h:panelGrid columns="3" border="1" bgcolor="" dir="CENTER" >
                                <h:outputText value="Fecha Inicio " />
                                <h:outputText value="Fecha Fin " />
                                <h:outputText value="Duracion(Horas) " />
                                <p:calendar value="#{calendarBean.date2}" pattern="HH:mm" timeOnly="true" size="6"/>
                                <p:calendar value="#{calendarBean.date2}" pattern="HH:mm" timeOnly="true" size="6"/>
                                <p:spinner id="HorasProg" value="#{spinnerController.number1}" min="0" size="7"/> 
                                <p:calendar value="#{calendarBean.date2}" pattern="HH:mm" timeOnly="true" size="6"/>
                                <p:calendar value="#{calendarBean.date2}" pattern="HH:mm" timeOnly="true" size="6"/>
                                <p:spinner id="HorasEjec" value="#{spinnerController.number1}" min="0" size="7"/> 
                            </h:panelGrid>
                            <p:inputTextarea rows="4" cols="28" completeMethod="#{autoCompleteBean.completeArea}" queryDelay="750" minQueryLength="4" />     
                            <p:inputTextarea rows="4" cols="28" completeMethod="#{autoCompleteBean.completeArea}" queryDelay="750" minQueryLength="4" />     
                           
                            
                    </h:panelGrid>
                    </p:panel>
                    
                    <p:commandButton value="Guardar" update="display" oncomplete="dlg.show()" />  
                    <p:commandButton value="Cancelar" update="display" oncomplete="dlg.show()" />  
                        <p:dialog header="Selected Values" modal="true" showEffect="fade" hideEffect="fade" widgetVar="dlg">  
                           <p:outputPanel id="display">  
                               <p:dataList value="#{formBean.selectedOptions}" var="option">  
                                   #{option}  
                               </p:dataList>  
                               <p:dataList value="#{formBean.selectedMovies}" var="movie">  
                                   #{movie}  
                               </p:dataList>  
                           </p:outputPanel>
                        </p:dialog>
                </p:panel>    
                <h:outputText value="Fundacion Universitaria Konrad Lorenz - Todos los derechos reservados*" style="color: lightgray"/>    
            </DIV>        
        </h:form>    
    </h:body>
</html>
